<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<link href="static/css/my.css" rel="stylesheet">
<script type="text/javascript">
	function upload() {
		var f = document.getElementById('file');
		if (f.files.length > 0) {
			var file = f.files[0];
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "upload/stream?fileName=" + file.name);
			xhr.overrideMimeType("application/octet-stream");
			try {
				if (typeof XMLHttpRequest.prototype.sendAsBinary == 'undefined') {
					XMLHttpRequest.prototype.sendAsBinary = function(text) {
						var data = new ArrayBuffer(text.length);
						var ui8a = new Uint8Array(data, 0);
						for (var i = 0; i < text.length; i++) {
							ui8a[i] = (text.charCodeAt(i) & 0xff);
						}
						this.send(ui8a);
					}
				}
			} catch (e) {}
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						console.log("upload complete");
						console.log("response: " + xhr.responseText);
					}
				}
			}
			var total = 0,
				loaded = 0, block = 1024 * 1024 * 4;
			var progress = document.getElementById('progress');
			var blob;
			var reader = new FileReader();
			reader.onloadstart = function() {
				console.log("onloadstart");
				total = file.size;
			}
			reader.onprogress = function(p) {
				console.log("onprogress");
				loaded += p.loaded;
				progress.value = (loaded / total) * 100;
			}
			reader.onload = function() {
				console.log("load complete");
				/* if (loaded < total) {
					if (file.webkitSlice) {
						blob = file.webkitSlice(loaded, loaded + block + 1);
					}
					else if (file.mozSlice) {
						blob = file.mozSlice(loaded, loaded + block + 1);
					}
					else {
						blob = file.slice(loaded, loaded + block + 1);
					}
					reader.readAsBinaryString(blob);
				}
				else {
					loaded = total;
				} */
			}
			reader.onloadend = function() {
				if (reader.error) {
					console.log(reader.error);
				}
				else {
					xhr.sendAsBinary(reader.result);
					xhr.sendAsBinary(reader.result);
				}
			}
			if (file.webkitSlice) {
				blob = file.webkitSlice(loaded, loaded + block + 1);
			}
			else if (file.mozSlice) {
				blob = file.mozSlice(loaded, loaded + block + 1);
			}
			else {
				blob = file.slice(loaded, loaded + block + 1);
			}
			reader.readAsBinaryString(blob);
		}
		else {
			alert('请选择一个文件');
		}
	}
	function upload2() {
		var file = document.getElementById('file');
		var progress = document.getElementById('progress');
		var message = document.getElementById('message');
		if (file.files.length <= 0) {
			alert('请选择一个文件');
			return false;
		}
	    // 准备FormData
	    var fd = new FormData;
	    fd.append("file", file.files[0]);
	    // 创建xhr对象
	    var xhr = new XMLHttpRequest;
	    // 监听进度 ，实时响应 
	    xhr.upload.onprogress = function(event) {
	        if (event.lengthComputable) {
	            var percent = Math.round(event.loaded * 100 / event.total);
	            progress.value = percent;
	            message.innerHTML = percent + '%';
	        }
	    };
	    // 传输开始事件
	    xhr.onloadstart = function(event) {
	        console.log('load start');
	    };
	    // 请求过程成功完成事件
	    xhr.onload = function(event) {
	        console.log('load success');
	        message.innerHTML = '上传成功：' + xhr.responseText;
	    };
	    // 请求发生错误
	    xhr.onerror = function(event) {
	        console.log('error');
	        message.innerHTML = '上传失败';
	    };
	    // 请求被取消
	    xhr.onabort = function(event) {
	        console.log('abort');
	        message.innerHTML = '上传取消';
	    };
	    // 传输结束，不管成功失败都会被触发 
	    xhr.onloadend = function(event) {
	        console.log('load end');
	    };
	    // 发起请求传送数据 
	    xhr.open('POST', 'upload/form', true);
	    xhr.send(fd);
	}
</script>
</head>
<body>
	<div class="content">
		<form action="upload/form" method="POST" enctype="multipart/form-data">
			<input type="file" name="file"> <input type="submit" value="上传">
		</form>
	</div>
	<div class="content">
		<input type="file" id="file">
		<button onclick="upload2()">上传</button>
		<progress id="progress" value="0" max="100"></progress>
		<span id="message"></span>
	</div>
</body>
</html>